<template>
  <map :style="{height:height+'px',width:'100%'}"
       :latitude="latitude"
       :longitude="longitude"
       :scale="scale"
       :markers="marker"
       @regionchange="setMarker"
       :bindregionchange="setMarker"
  />
</template>

<script>
import {debounce, getScreen} from "../../service/auth";
import {aroundCustomer} from "../../service/api/delivery";

export default {
  name: "index",
  data(){
      return{
        longitude:'',
        latitude:'',
        marker: [{
          id: 0,
          latitude: 0, //纬度
          longitude: 0, //经度
          // title: '山东某某有限公司', //标注点名
          alpha: 1, //透明度
          width:20,
          height:30,
          // iconPath:'https://www.zjjqf.cn/file/static/location.png'
        }],
        scale:17,
        height:0,
        query:{
          maxLat:'',
          maxLng:'',
          minLat:'',
          minLng:''
        }
      }
  },
  created() {
    const that  = this
    this.height = getScreen().height
    uni.getLocation({
      type: 'wgs84',
        isHighAccuracy:true,
      geocode:true,//设置该参数为true可直接获取经纬度及城市信息
      success: function (res) {
        that.longitude = res.longitude
        that.latitude = res.latitude
        that.marker = [{
          id: 0,
          latitude: res.latitude, //纬度
          longitude: res.longitude, //经度
          // title: '山东某某有限公司', //标注点名
          alpha: 1, //透明度
          width:20,
          height:30,
        }]
      },
      fail: function (e) {
        uni.showToast({
          title: '获取地址失败，将导致部分功能不可用',
          icon:'none'
        });
      }})
  },
  methods:{
    getMaxMinLongitudeLatitude(longitude,latitude,distince){
      let r = 6371.393;    // 地球半径千米
      let lng = longitude;
      let lat = latitude;
      let dlng = 2 * Math.asin(Math.sin(distince / (2 * r)) / Math.cos(lat * Math.PI / 180));
      dlng = dlng * 180 / Math.PI;// 角度转为弧度
      let dlat = distince / r;
      dlat = dlat * 180 / Math.PI;
      let minlat = lat - dlat;
      let maxlat = lat + dlat;
      let minlng = lng - dlng;
      let maxlng = lng + dlng;
      return minlng + "-" + maxlng + "-" + minlat + "-" + maxlat;
    },
    setMarker(e){
      if (e.type === 'end'){
        // this.query.maxLng = e.target.region.northeast.longitude
        // this.query.maxLat = e.target.region.northeast.latitude
        // this.query.minLng = e.target.region.southwest.longitude
        // this.query.minLat = e.target.region.southwest.latitude
        this.onGet()
      }
    },
    onGet:debounce(function (){
      aroundCustomer(this.query).then(res=>{
        const customerList = res.data.filter(item=>/^\d+\.\d+,\d+\.\d+$/.test(item.location))
        const marker = customerList.map(item=>{
          const location = item.location.split(',')
          const longitude = Number(location[0])
          const latitude = Number(location[1])
          return {
            id: item.id,
            longitude,
            latitude,
            title:item.name,
              alpha: 1, //透明度
              width:20,
              height:30,
          }
        })
        this.marker = [this.marker[0],...marker]
      })

    }),
    marker1(e){
        console.log(e)
      }
  }
}
</script>

<style scoped>

</style>
